import { useEffect, useState } from "react";
import styles from './index.module.less'
import { useNavigate, useLocation } from 'react-router-dom'
import { Button, Flex, Table, Popconfirm, message, Badge } from 'antd'
import { DATATYPE } from './type'
import { useRequest } from "ahooks";
import { getRequestCgi } from "@/request";
import { record_type } from "./typeing";
const about = () => {
    const navigate = useNavigate()
    const { state } = useLocation()
    const defaultColumns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status: boolean) => {
                return status ? <Badge status={state ? 'success' : 'error'} text={status ? '正常' : '异常'} /> : <Badge status={!state ? 'success' : 'error'} text={status ? '正常' : '异常'} />
            }
        },
        {
            title: '地区',
            dataIndex: 'address',
            key: 'address',
            render: (address: string) => {
                return <span title={address}>{address.slice(0, 10)}...</span>
            }
        },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: (record: DATATYPE) => {
                return (
                    <Flex>
                        <Button type="link" onClick={() => {
                            navigate('/table-list/detail-page', { state: { record } })
                        }}>{'查看/编辑'}</Button>
                        <Popconfirm
                            title="删除"
                            description="删除不可恢复"
                            onCancel={() => confirm(0, record)}
                            onConfirm={() => confirm(1, record)}
                            okText="删除"
                            cancelText="取消"
                        >
                            <Button type="link">{'删除'}</Button>
                        </Popconfirm>
                    </Flex>
                )
            }
        },
    ];

    const [data, setData] = useState<DATATYPE[] | any>([]);
    const { data: list, loading } = useRequest(() => {
        return getRequestCgi('/api/table-list')
    }, { manual: false })
    useEffect(() => {
        if(!loading) setData(list)
    },[loading])
    
    const confirm = (num: number, record: { key: number }) => {
        if (num) {
            const index = data.findIndex((item: { key: number }) => item.key === record.key)
            const newData = [...data]
            newData.splice(index, 1)
            setData(newData)
            message.success('删除成功')
            return
        }
        message.success('取消删除')
    }
    const rowSelection = {
        onChange: (rowKeys, rowList) => {
            const key = rowKeys[0]
            const item = rowList[0]
            console.log(key, item);
        },
    }

    return (
        <div className={styles.tableList}>
            <Table
                rowSelection={{
                    type: 'radio',
                    ...rowSelection
                }}
                columns={defaultColumns}
                dataSource={data}
                pagination={false}
                bordered
                expandable={{
                    expandedRowRender: (record: record_type) => {
                        if (record.children) {
                            const { children } = record;
                            const childColumns = Object.keys(children[0]).map((item) => {
                                return {
                                    title: item,
                                    dataIndex: item,
                                    key: item,

                                }
                            })
                            return (
                                <Table
                                    showHeader={false}
                                    columns={childColumns}
                                    dataSource={children}
                                    pagination={false}

                                />
                            )
                        }
                        return <Table showHeader={false} />
                    }
                }}
            />

        </div>
    )
}

export default about